<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { getConsistBeanByIdApi } from "./api";
import { getColdCompany } from "@/utils/storage";
import { getDicMap } from "@/utils/storage";
import { useBaseInfo } from "./useBaseInfo";
import { useTrailerRender } from "./useTrailerRender";
import { useTruckBox } from "./useTruckBox";
import { useButton } from "./useButton";

export default {
  name: "ConfirmDetails",
  components: {},
  setup() {
    const state = reactive({
      consistBean: {},
      inOutTypeDiffType: 1,
    });
    const { EventChannel, navigateTo, route } = useTzRouter();
    const { consistId } = route.query;
    const { userType } = getDicMap();

    // 编辑页保存回退刷新
    EventChannel.on(route.path, (event) => {
      if (event?.type === "editBackRefresh") {
        // 刷新数据
        initData();
      }
    });
    // 大陆捆绑新增后跳转，通过 isNewOrder 识别
    if (route.query.isNewOrder) {
      state.isNewOrder = true;
    }

    const initData = () => {
      if (consistId) {
        state.consistId = consistId;
        const params = {
          consistId,
        };
        userType.isPersonal && (params.queryType = 1);

        Taro.showLoading({
          title: "加载中",
        });
        getConsistBeanByIdApi(params)
          .then((res) => {
            Taro.hideLoading();
            const { consistBean } = res.data;
            Object.assign(state.consistBean, consistBean);
            state.price = res.data.Price;
            state.totalMoney = res.data.TotalMoney;

            const inOutType = consistBean.inOutType;
            /**
             * MT4401: "进境(重车确报)"
             * MT4402: "出境(重车确报)"
             * MT4405: "进境(搭载空箱确报)"
             * MT4406: "出境(搭载空箱确报)"
             */
            if (["MT4405", "MT4406"].includes(inOutType)) {
              state.inOutTypeDiffType = 2;
            } else if (["MT4401", "MT4402"].includes(inOutType)) {
              state.inOutTypeDiffType = 3;
            } else {
              state.inOutTypeDiffType = 1;
            }
          })
          .catch((err) => {
            console.log(err);
            Taro.hideLoading();
          });
      }
    };
    // 首次加载数据
    initData();

    // 固定信息
    const baseInfoRender = useBaseInfo(state, userType, getDicMap, navigateTo);

    // 托架信息
    const trailerRender = useTrailerRender(state, getDicMap, getColdCompany);

    // 集装箱信息
    const truckBoxRender = useTruckBox(state, getDicMap);

    // 补充信息
    const useRestInfo = () => {
      return (
        <tz-view class="info-box">
          <tz-view class="cell-content">
            <tz-cell class="rest" border title="账户余额">
              {state.totalMoney}
            </tz-cell>
            <tz-cell class="bind-cost" border title="捆绑费用">
              {state.price}
            </tz-cell>
          </tz-view>
        </tz-view>
      );
    };
    // 操作按钮
    const btnRender = useButton(state, userType);

    // 按条件展示信息
    const renderDetail = () => {
      const { consistBean, inOutTypeDiffType } = state;
      const domList = [];
      if (consistBean.truckList && consistBean.truckList.length) {
        domList.push(baseInfoRender());
        // 托架信息
        if (
          consistBean.truckList[0].truckType !== "0" &&
          consistBean.truckList[0].trailerCode
        ) {
          domList.push(trailerRender());
        }
        // 货柜信息
        if (
          consistBean.truckList[0].truckBoxings !== "0" &&
          consistBean.truckList[0].truckBoxings &&
          inOutTypeDiffType !== 1
        ) {
          domList.push(truckBoxRender());
        }
        if (userType.isPersonal) {
          domList.push(useRestInfo());
        }
        domList.push(btnRender());
      }
      return domList;
    };

    return () => {
      return <tz-view class="confirm-details">{renderDetail()}</tz-view>;
    };
  },
};
</script>

<style lang="scss">
.confirm-details {
  background-color: $white;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  .info-box {
    display: flex;
    flex-direction: column;
    .info-box-title {
      font-size: 18px;
      padding-left: 10px;
      color: $primary-color;
      padding-top: 10px;
    }
    .cell-content {
      .tz-cell {
        font-size: 16px;
        line-height: 36px;
        padding-left: 20px;
        .tz-cell-label {
          font-size: 14px;
          color: $title-color3;
        }
        .tz-cell-value {
          .sub-content {
            margin-left: 10px;
            color: $primary-color;
          }
        }
      }
      .rest,
      .bind-cost {
        .tz-cell-value {
          color: $danger-color;
        }
      }
    }
  }
  .btn-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tz-button {
      align-self: center;
      width: 345px;
      margin-top: 20px;
      height: 44px;
    }
    .btn-wrap {
      display: flex;
      flex-direction: column;
      width: 345px;
      &.abreast {
        flex-direction: row;
        justify-content: space-between;
        .tz-button {
          width: 48%;
        }
      }
    }
  }
}
</style>
